<template>
  <div class="goods-item" @click="itemClick">
    <!--<img :src="img_url" alt="" @load="imageLoad">-->
    <img v-lazy="img_url" alt="" @load="imageLoad">

    <div class="goods-info">
      <p>{{ goodsItem.title }}</p>
      <p>
        <span class="price">{{ goodsItem.price }}</span>
        <!--<img src="~assets/img/common/collect.svg" alt="">-->
        <span class="collect">{{ goodsItem.cfav }}</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){
      return {
        img_url: require("assets/img/home/"+ this.tabType +"/"+ this.goodsItem.img +".webp")
      }
    },
    props: {
      goodsItem: {
        type: Object,
        default(){
          return {}
        }
      },
      tabType: {
        type: String,
        default: 'pop'
      }
    },
    watch: {
      tabType(newVal){
        this.img_url = require("assets/img/home/"+ newVal +"/"+ this.goodsItem.img +".webp")
      }
    },
    methods: {
      imageLoad(){
        // 向事件总线发射
        this.$bus.$emit('itemImageLoad')
      },
      itemClick(){
        if(!this.goodsItem.id) return console.log('此商品没有id')

        this.$router.push({ path: '/detail/'+this.goodsItem.id})
      }
    }
  }
</script>

<style lang="less" scoped>
.goods-item{
  position: relative;
  padding-bottom: 40px;
  &>img{
    width: 100%;
    display: block;
    border-radius: 5px;
  }
  .goods-info{
    height: 40px;
    font-size: 14px;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: center;
    display: flex;
    p{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .price{
      color: var(--color-high-text);
      margin-right: 20px;
    }
    .collect{
      position: relative;
    }
    .collect::after{
      content: '';
      position: absolute;
      left: -15px;
      top: 1px;
      width: 14px;
      height: 14px;
      background: url("~assets/img/common/collect.svg") 0 0;
      -webkit-background-size: 14px 14px;
      background-size: 14px 14px;
    }
  }
}
</style>
